<template>
    <div class="appMainWarp">
        <div class="PhasedPlan">
            <!-- 分期计划管理 -->
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline padding_top15"
                size="small"
                label-width="150px"
            >
                <el-row>
                    <el-form-item label="账单分期计划">
                        <el-input v-model="formData.itemNo" placeholder="请输入参数类型"></el-input>
                    </el-form-item>
                    <el-form-item label="账单分期类型">
                        <el-input v-model="formData.itemCm" placeholder="请输入参数名称"></el-input>
                    </el-form-item>
                    <div class="inlineBtn">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            class="resetBtn"
                        >重置</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                </el-row>
            </el-form>
            <div class="text_center">
                <template>
                    <el-table
                        :data="tableData"
                        border
                        stripe
                        style="width:100%"
                        class="el-table heard-bg"
                    >
                        <el-table-column label="计划编号" prop="itemNo" width="90px"></el-table-column>
                        <el-table-column
                            label="分期名称"
                            prop="itemCm"
                            width="150px"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column label="费率" prop="appFeeratio" show-overflow-tooltip></el-table-column>
                        <el-table-column label="产品" prop="PRODUCT" width="50px"></el-table-column>
                        <el-table-column label="分期期数" prop="nbrMths" width="200px"></el-table-column>
                        <el-table-column label="手续费分摊方式" prop="paytype" width="150px"></el-table-column>
                        <el-table-column label="本金分摊方式" prop="priType" width="150px"></el-table-column>
                        <el-table-column label="固定费率" prop="fixfee" width="150px"></el-table-column>
                        <el-table-column label="利率" prop="interestRate" show-overflow-tooltip></el-table-column>
                        <el-table-column label="折扣率" prop="discountRate" width="80px"></el-table-column>
                        <el-table-column label="操作" width="120px">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="revamp(scope.$index,scope.row)"
                                    type="text"
                                >修改</el-button>
                                <el-button
                                    @click.native.prevent="deleteRow(scope.$index,scope.row)"
                                    type="text"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPage"
                        :handleChangeSize="handleChangeSize"
                        :currentPage="currentPage"
                        :pageSize="pageSize"
                        :total="total"
                    />
                </template>
            </div>
        </div>
        <div v-if="showDialogFrom">
            <phased-plan-item
                :isTitleValue="isTitleValue"
                :updataInfocurres="updataInfocurres"
                @parnetFun="parnetFun"
            ></phased-plan-item>
        </div>
    </div>
</template>
<script>
import PhasedPlanItem from './components/PhasedPlanItem.vue';
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'PhasedPlan',
    data() {
        return {
            formData: {
                id: '',
                itemNo: '',
                itemCm: '',
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            isTitleValue: '',
            total: 0,
            showDialogFrom: false,//浮动框 显示和隐藏
            updataInfocurres: {},//修改页面上送的值
        }
    },
    components: { PhasedPlanItem, Pagination },
    mounted() {
        this.getInitData('1');
    },
    methods: {
        // 页面进入初始化页面数据
        getviewInit() {
            // this.formData.
        },
        // 第一次进入 查所有的第一页
        // 获取参数表格数据
        getInitData(types) {
            let params = {};
            if (types == '1') {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            } else {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    itemNo: this.formData.itemNo,
                    itemCm: this.formData.itemCm,
                };
            }

            // params = Object.assign({}, params);
            this.$post.MpprmPlan.pageIccMpprm(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.tableData = res.data.content.records;
                    this.total = res.data.content.total;
                }
            });
        },
        // 查询
        hanlesearch() {
            this.currentPage = 1;
            this.getInitData('2');
        },
        // 新增加
        hanlePush() {
            this.isTitleValue = '新增分期计划';
            if (!this.showDialogFrom) {
                this.showDialogFrom = true;
            } else {
                this.showDialogFrom = false;
            }
        },
        //重置
        handleReset() {
            this.formData.itemNo = '';
            this.formData.itemCm = '';
            this.tableData = [];
        },
        // 修改
        revamp(value, row) {
            this.isTitleValue = '修改分期计划';
            if (!this.showDialogFrom) {
                this.showDialogFrom = true;
            } else {
                this.showDialogFrom = false;
            }
            this.updataInfocurres = row;
        },
        // 删除
        async deleteRow(value, row) {
            await this.$confirm('确定是否删除当前数据', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'warning', type: 'warning',
            }).then(() => {
                console.log('走删除方法', row.id);
                this.getContactsQueryInfo(row.id);
            });
        },
        getContactsQueryInfo(id) {
            let params = {
                id: id,
            };
            this.$post.MpprmPlan.deleteIccMpprm(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.$message.success('删除成功！');
                    this.currentPage = 1;
                    this.getInitData('1');
                } else {
                    this.$message.error('删除失败！');
                }
            });
        },
        // 子组件 给父组件传值 传方法
        parnetFun() {
            this.showDialogFrom = false;
            this.currentPage = 1;
            this.getInitData('1');
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            console.log('this.currentPage', val);
            this.currentPage = val;
            this.getInitData('2');
            this.tableData = [];
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            console.log('pageSize', val);
            this.pageSize = val;
            this.getInitData('2');
            this.tableData = [];
            console.log('this.pageSize', this.pageSize);

        },
    },
}
</script>
<style  lang="scss" >
.PhasedPlan {
    height: 80%;
    text-align: left;
    .text_center {
        width: 97%;
        margin: 0 auto;
        padding-bottom: 20px;
        .el-table .el-table__body tr td .cell {
            white-space: nowrap;
            div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>